<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
              xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>styleswitcher</title>
</head>
<body>
<div th:fragment="styleswitcher">


    <script src="scripts/switcher.js" th:src="@{/scripts/switcher.js}"></script>

    <div id="style-switcher">
        <h2>Style Switcher <a href="#"></a></h2>

        <div><h3>Predefined Colors</h3>
            <ul class="colors" id="color1">
                <li><a href="#" class="green" title="Green"></a></li>
                <li><a href="#" class="blue" title="Blue"></a></li>
                <li><a href="#" class="orange" title="Orange"></a></li>
                <li><a href="#" class="navy" title="Navy"></a></li>
                <li><a href="#" class="yellow" title="Yellow"></a></li>
                <li><a href="#" class="peach" title="Peach"></a></li>
                <li><a href="#" class="beige" title="Beige"></a></li>
                <li><a href="#" class="purple" title="Purple"></a></li>
                <li><a href="#" class="celadon" title="Celadon"></a></li>
                <li><a href="#" class="pink" title="Pink"></a></li>
                <li><a href="#" class="red" title="Red"></a></li>
                <li><a href="#" class="brown" title="Brown"></a></li>
                <li><a href="#" class="cherry" title="Cherry"></a></li>
                <li><a href="#" class="cyan" title="Cyan"></a></li>
                <li><a href="#" class="gray" title="Gray"></a></li>
                <li><a href="#" class="darkcol" title="Dark"></a></li>
            </ul>

            <h3>Layout Style</h3>
            <div class="layout-style">
                <select id="layout-style">
                    <option value="1">Boxed</option>
                    <option value="2">Wide</option>
                </select>
            </div>

            <h3>Background Image</h3>
            <ul class="colors bg" id="bg">
                <li><a href="#" class="bg1"></a></li>
                <li><a href="#" class="bg2"></a></li>
                <li><a href="#" class="bg3"></a></li>
                <li><a href="#" class="bg4"></a></li>
                <li><a href="#" class="bg5"></a></li>
                <li><a href="#" class="bg6"></a></li>
                <li><a href="#" class="bg7"></a></li>
                <li><a href="#" class="bg8"></a></li>
                <li><a href="#" class="bg9"></a></li>
                <li><a href="#" class="bg10"></a></li>
                <li><a href="#" class="bg11"></a></li>
                <li><a href="#" class="bg12"></a></li>
                <li><a href="#" class="bg13"></a></li>
                <li><a href="#" class="bg14"></a></li>
                <li><a href="#" class="bg15"></a></li>
                <li><a href="#" class="bg16"></a></li>
            </ul>

            <h3>Background Color</h3>
            <ul class="colors bgsolid" id="bgsolid">
                <li><a href="#" class="green-bg" title="Green"></a></li>
                <li><a href="#" class="blue-bg" title="Blue"></a></li>
                <li><a href="#" class="orange-bg" title="Orange"></a></li>
                <li><a href="#" class="navy-bg" title="Navy"></a></li>
                <li><a href="#" class="yellow-bg" title="Yellow"></a></li>
                <li><a href="#" class="peach-bg" title="Peach"></a></li>
                <li><a href="#" class="beige-bg" title="Beige"></a></li>
                <li><a href="#" class="purple-bg" title="Purple"></a></li>
                <li><a href="#" class="red-bg" title="Red"></a></li>
                <li><a href="#" class="pink-bg" title="Pink"></a></li>
                <li><a href="#" class="celadon-bg" title="Celadon"></a></li>
                <li><a href="#" class="brown-bg" title="Brown"></a></li>
                <li><a href="#" class="cherry-bg" title="Cherry"></a></li>
                <li><a href="#" class="cyan-bg" title="Cyan"></a></li>
                <li><a href="#" class="gray-bg" title="Gray"></a></li>
                <li><a href="#" class="dark-bg" title="Dark"></a></li>
            </ul>
        </div>

        <div id="reset"><a href="#" class="button color">Reset</a></div>

    </div>


</div>
</body>
</html>